<template>
  <div class="se-container">
    <div class="se-header">版本管理</div>
    <div class="se-body">
      <div class="se-table-header">
        <el-button class="se-table-header-button" type="primary" @click="addExamine">添加新版本</el-button>
      </div>
      <el-table
        v-loading="loading" id="examine-table" :data="list" :height="tableHeight"
        class="main-table" highlight-current-row style="width: 100%">
        <el-table-column show-overflow-tooltip prop="apptype" label="类型" width="180">
          <template slot-scope="scope">
            {{scope.row.appType == '0' ? 'Android':'iOS'}}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="version" label="版本" width="180"></el-table-column>
        <el-table-column show-overflow-tooltip prop="downloadUrl" label="下载地址" width="180"></el-table-column>
        <el-table-column show-overflow-tooltip prop="updateDescription" label="更新内容" width="180"></el-table-column>
        <el-table-column show-overflow-tooltip prop="forciblyUpdate" label="更新类型" width="180">
          <template slot-scope="scope">
            {{scope.row.forciblyUpdate == '0' ? '选择更新':'强制更新'}}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column/>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClickEdt(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleClickDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="p-contianer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size.sync="pageSize"
        :total="total"
        class="p-bar"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
    <el-dialog title="新增版本" :visible.sync="dialogAddVisible" @closed="edClosed('ed')">
      <el-form ref="ed" :model="ed" :rules="rules" label-width="80px" size="mini">
        <el-form-item label="应用类型" prop="appType">
          <el-select v-model="ed.appType">
            <el-option label="Android" value="0"></el-option>
            <el-option label="iOS" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          最近版本号: {{ed.appType == '0' ? last_version.Android.version:last_version.iOS.version}}
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-input v-model="ed.version" autocomplete="off" placeholder="请输入版本号(0.0.0)"></el-input>
        </el-form-item>
        <el-form-item label="下载地址" prop="downloadUrl">
          <el-input v-model="ed.downloadUrl" autocomplete="off" placeholder="请输入地址" ></el-input>
        </el-form-item>
        <el-form-item label="更新内容" prop="updateDescription" >
          <el-input type="textarea" v-model="ed.updateDescription" autocomplete="off" placeholder="请输入更新内容"></el-input>
        </el-form-item>
        <el-form-item label="更新类型" prop="forciblyUpdate">
          <el-select v-model="ed.forciblyUpdate">
            <el-option label="选择更新" value="0"></el-option>
            <el-option label="强制更新" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: 20px;">
          <el-button type="primary" @click="edSubm('ed')">确定</el-button>
          <el-button @click="edClr('ed')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { insertv,deletev,getVersionList,getLastVersion } from '@/api/systemManagement/SystemVersion'

  export default {

    name: 'SystemEdition',
    currentPage: 1,
    pageSize: 15,
    pageSizes: [15, 30, 60, 100],
    total: 0,
    mixins: [],
    data() {
      var validateVersion = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入版本号!'));
        } else if (!/^\d(\.\d+){2,2}$/.test(value)) {
          callback(new Error('版本号格式不正确!'));
        } else {
          callback();
        }
      };
      return {
        last_version:{
          Android:'',
          iOS:''
        },
        ed: {
          versionId:'',
          appType:'0',
          version:'',
          downloadUrl:'',
          updateDescription:'',
          forciblyUpdate:'0',
        },
        rules: {
          appType: [
            { required: true, message: '请选择类型', trigger: 'change' }
          ],
          version: [
            { required: true, validator: validateVersion, trigger: 'blur' }
          ],
          downloadUrl: [
            { required: true, message: '请输入下载地址', trigger: 'change' }
          ],
          updateDescription: [
            { required: true, message: '请输入更新内容', trigger: 'change' }
          ],
          forciblyUpdate: [
            { required: true, message: '请输入更新类型', trigger: 'change' }
          ],
        },
        dialogAddVisible:false,
        loading: false, // 加载动画
        tableHeight: document.documentElement.clientHeight - 240, // 表的高度
        list: [],
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 30, 40],
        total: 0,

      }
    },
    computed: {},
    mounted() {
      this.getList()
      this._getLastVersion();
    },
    methods: {
      _getLastVersion(){
        getLastVersion().then(res =>{
          this.last_version = res.data;
          if(this.last_version.Android == null || this.last_version.Android == ''){
            this.last_version.Android = '0.0.0'
          }
          if(this.last_version.iOS == null || this.last_version.iOS == ''){
            this.last_version.iOS = '0.0.0'
          }
        })
      },
      /** 获取列表数据 */
      getList() {
        this.loading = true
        getVersionList({
          page: this.currentPage,
          limit: this.pageSize
        })
          .then(res => {
            this.list = res.data.list
            this.total = res.data.totalRow
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      },
      /** 格式化字段 */
      fieldFormatter(row, column) {

        return row[column.property]
      },
      /**
       *  添加
       */
      addExamine() {
        this.dialogAddVisible = true;
      },
      // 提交
      edSubm(fm){
        this.$refs[fm].validate((valid) => {
          if (valid) {
            this.loading = true
            insertv({entity:this.ed}).then(res => {
              this.dialogAddVisible = false;
              this.edRT();
              this.loading = false;
              this.getList()
            })
              .catch(()=>{
                this.loading = false;
              });
          } else {

            return false;
          }
        });


      },
      edClr(fm){
        this.dialogAddVisible = false;
        this.edRT();
      },
      edClosed(fm){
        this.edRT();
      },
      // 更改每页展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.currentPage = val
        this.getList()
      },
      handleClickEdt(row) {
        this.dialogAddVisible = true;
        this.ed = JSON.parse(JSON.stringify(row))
      },
      handleClickDel(row){
        this.$confirm('确定删除版本信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.loading = true;
          deletev({versionId:row.versionId}).then(res =>{
            this.loading = false
            this.$message.success('操作成功')
            this.getList();
          }).catch(()=>{
            this.loading = false
          })
        }).catch(()=>{

        })
      },
      edRT(){
        this.ed = {
          versionId:'',
            appType:'0',
            version:'',
            downloadUrl:'',
            updateDescription:'',
            forciblyUpdate:'0',
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .se-header {
    height: 60px;
    position: relative;
    z-index: 100;
    padding: 0 20px;
    font-size: 18px;
    line-height: 60px;
  }

  .se-body {
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
  }

  .se-table-header {
    height: 50px;
    background-color: white;
    position: relative;
    .se-table-header-button {
      float: right;
      margin-right: 20px;
      margin-top: 10px;
    }
  }

  .p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
      float: right;
      margin: 5px 100px 0 0;
      font-size: 14px !important;
    }
  }

  @import '../styles/table';
</style>
